<template>
  <div class="invoice1_bos">
    <div class="invoice1_nav">
      <div class="title">
        <span style="font-weight: bold">开票业务办理</span>
        <span class="title1">发件邮箱设置</span>
      </div>
      <div class="nav_bos">
        <div v-for="(item, index) in list1" :key="index" class="nav_list">
          <img v-if="index == 0" src="@/assets/invoice/nav1.svg" alt="" />
          <img v-if="index == 1" src="@/assets/invoice/nav2.svg" alt="" />
          <img v-if="index == 2" src="@/assets/invoice/nav3.svg" alt="" />
          <img v-if="index == 3" src="@/assets/invoice/nav4.svg" alt="" />
          <img v-if="index == 4" src="@/assets/invoice/nav5.svg" alt="" />
          <img v-if="index == 5" src="@/assets/invoice/nav6.svg" alt="" />
          <div class="nav_title">{{ item.title }}</div>
        </div>
      </div>
    </div>
    <div class="invoice1_nav">
      <div class="title">
        <span style="font-weight: bold">开票情况概览</span>
        <span class="title2">当前月份：{{ year }}年{{ month }}月</span>
      </div>
      <div class="nav_bos1">
        <div v-for="(item, index) in list2" :key="index" class="nav1_list">
          <div class="nav1_title">
            <span>{{ item.title }}</span>
            <el-icon v-if="index == 0" color="#4285F4" size="14" class="refresh_icon">
              <Refresh />
            </el-icon>
          </div>
          <div class="nav1_num">
            <div v-if="index == 0" class="num_bntbos">
              <div>{{ item.num }}</div>
              <div class="num_bnt">去调整</div>
            </div>
            <span v-else>{{ item.num }}</span>
          </div>
          <div class="nav1_info">{{ item.info1 }}</div>
          <div class="nav1_info" style="margin-top: 10px">{{ item.info2 }}</div>
        </div>
      </div>
    </div>
    <div class="invoice1_nav">
      <div class="title">
        <span style="font-weight: bold">开票业务办理</span>
        <span class="title1">发件邮箱设置</span>
      </div>
      <div class="nav_bos">
        <div v-for="(item, index) in list3" :key="index" class="nav_list" @click="goPath(item.url)">
          <img v-if="index == 0" src="@/assets/invoice/nav7.svg" alt="" />
          <img v-if="index == 1" src="@/assets/invoice/nav8.svg" alt="" />
          <img v-if="index == 2" src="@/assets/invoice/nav9.svg" alt="" />
          <img v-if="index == 3" src="@/assets/invoice/nav10.svg" alt="" />
          <img v-if="index == 4" src="@/assets/invoice/nav11.svg" alt="" />
          <img v-if="index == 5" src="@/assets/invoice/nav12.svg" alt="" />
          <img v-if="index == 6" src="@/assets/invoice/nav13.svg" alt="" />
          <img v-if="index == 7" src="@/assets/invoice/nav14.svg" alt="" />
          <div class="nav_title">{{ item.title }}</div>
        </div>
      </div>
    </div>

    <div class="flex-row-between">
      <div class="invoice1_nav" style="width: calc(50% - 10px); min-width: 100px">
        <div class="title">
          <span style="font-weight: bold">用票情况概览</span>
        </div>
        <div class="nav_bos1">
          <div class="nav1_list">
            <div class="nav1_title">
              <span>当前可勾选增值税金额（元）</span>
            </div>
            <div class="nav1_num">
              <div class="num_bntbos">
                <div style="font-size: 32px; font-weight: 500; color: #333">
                  {{ info.dang_zeng_money ? formatCurrency(info.dang_zeng_money) : "0.00" }}
                </div>
                <div class="num_bnt">去勾选</div>
              </div>
            </div>
            <div class="nav1_info">
              增值税税额：
              {{ info.zeng_all_moeny ? formatCurrency(info.zeng_all_moeny) : "0.00" }}元
            </div>
            <div class="nav1_info" style="margin-top: 10px">抵扣凭证数量： {{ info.di_num }}张</div>
          </div>

          <div class="nav1_list">
            <div class="nav1_title">
              <span>已确认增值税金额（元）</span>
            </div>
            <div class="nav1_num">
              <span>0.00</span>
            </div>
            <div class="nav1_info">增值税税额： 0元</div>
            <div class="nav1_info" style="margin-top: 10px">抵扣凭证数量： 0张</div>
          </div>
        </div>
      </div>

      <div class="invoice1_nav" style="width: calc(50% - 10px); min-width: 100px">
        <div class="title">
          <span style="font-weight: bold">风险提示</span>
        </div>
        <div class="nav_bos1">
          <div class="nav1_list">
            <div class="nav1_title">
              <span>取得异常凭证数量（张）</span>
            </div>
            <div class="nav1_num">
              <div class="num_bntbos">
                <div style="font-size: 32px; font-weight: 500; color: #333">0</div>
                <div class="num_bnt">去查看</div>
              </div>
            </div>
            <div class="nav1_info">-</div>
            <div class="nav1_info" style="margin-top: 10px">-</div>
          </div>

          <div class="nav1_list">
            <div class="nav1_title">
              <span>取得异常凭证金额合计（元）</span>
            </div>
            <div class="nav1_num">
              <span>0.00</span>
            </div>
            <div class="nav1_info">异常凭证税额： 0.00元</div>
            <div class="nav1_info" style="margin-top: 10px">-</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import Http from "@/utils/api";
import { formatCurrency } from "@/utils/index";
const info = ref<any>({});
const year = ref<any>("");
const month = ref<any>("");
const list1 = [
  {
    title: "开票信息维护",
  },
  {
    title: "蓝字发票开具",
  },
  {
    title: "红字发票开具",
  },
  {
    title: "纸质发票业务",
  },
  {
    title: "发票额度调整申请",
  },
  {
    title: "开具原适用税率发票申请",
  },
];
const list2 = ref<any>([
  {
    title: "可用发票额度（申报前）（元）",
    num: 0,
    info1: "发票总额度： 0.00元",
    info2: "-",
  },
  {
    title: "当前可用纸票数量（张）",
    num: 0,
    info1: "已开具： 0张",
    info2: "-",
  },
  {
    title: "蓝字发票开具金额（元）",
    num: "0.00",
    info1: "蓝字发票累计税额：0.00元",
    info2: "蓝字发票数量： 0张",
  },
  {
    title: "红字发票开具金额（元）",
    num: "0.00",
    info1: "红字发票累计税额：0.00元",
    info2: "红字发票数量：0张",
  },
]);
const list3 = [
  {
    title: "发票勾选确认",
  },
  {
    title: "发票查询统计",
    url: "/invoice2",
  },
  {
    title: "发票查验",
  },
  {
    title: "涉税信息查询",
  },
  {
    title: "海关缴款书采集",
  },
  {
    title: "发票入账标识",
  },
  {
    title: "收票箱",
  },
  {
    title: "助信码",
  },
];
function goPath(url: any) {
  if (url) {
    router.push(url);
  }
}

onMounted(() => {
  var date = new Date();
  year.value = date.getFullYear();
  month.value = date.getMonth() + 1; // 注意月份是从0开始计数的，所以要加1
  document.title = "发票业务-全国统一规范电子税务局-山东万兴家具有限公司";

  // 开票情况概览
  Http.Get("api5", {}).then((res: any) => {
    if (res.code == 1) {
      info.value = res.data;
      list2.value[0].num = res.data.ke_edu ? formatCurrency(res.data.ke_edu) : 0;
      list2.value[0].info1 =
        "发票总额度： " +
        (res.data.fa_all_edu ? formatCurrency(res.data.fa_all_edu) : "0.00") +
        "元";
      list2.value[2].num = res.data.blue_kai_money
        ? formatCurrency(res.data.blue_kai_money)
        : "0.00";
      list2.value[2].info1 =
        "蓝字发票累计税额：" +
        (res.data.lan_all_shui ? formatCurrency(res.data.lan_all_shui) : "0.00") +
        "元";
      list2.value[2].info2 = "蓝字发票数量： " + (res.data.lan_num || "0") + "张";
    } else {
      ElMessage({
        message: res.message,
        type: "error",
        plain: true,
      });
    }
  });
});

onUnmounted(() => {
  document.title = "国家税务总局山东省电子税务局";
});
</script>

<style lang="scss" scoped>
.invoice1_bos {
  min-width: 1232px;
  padding: 24px;

  .invoice1_nav {
    min-width: 1184px;
    padding: 24px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 2px;

    .title {
      padding-bottom: 20px;
      font-size: 16px;
      color: #333;
      border-bottom: 1px solid #eeeeef;

      .title1 {
        margin-left: 20px;
        color: #4285f4;
        cursor: pointer;
      }

      .title2 {
        margin-left: 20px;
        font-size: 14px;
        color: #666;
      }
    }

    .nav_bos {
      display: flex;
      flex-wrap: wrap;

      .nav_list {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        width: 128px;
        height: 148px;
        padding-top: 25px;
        padding-bottom: 10px;
        margin: 20px 16px 0 0;
        cursor: pointer;
        border: 1px solid #eeeeef;

        &:hover {
          box-shadow: 0 4px 10px rgb(17 31 138 / 16%);
        }

        img {
          width: 46px;
          height: 46px;
        }

        .nav_title {
          width: 104px;
          height: 48px;
          font-size: 16px;
          font-weight: bold;
          color: #333;
          text-align: center;
        }
      }
    }

    .nav_bos1 {
      display: flex;
      padding-top: 20px;

      .nav1_list {
        flex: 1;
        padding-left: 20px;
        border-left: 1px solid #eeeeef;

        .nav1_title {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #333;

          .refresh_icon {
            cursor: pointer;
          }
        }

        .nav1_num {
          height: 36px;
          margin: 10px 0 24px;
          font-size: 32px;
          font-weight: 500;
          color: #333;

          .num_bntbos {
            display: flex;
            align-items: center;
            font-size: 20px;
            color: #fc5541;

            .num_bnt {
              height: 24px;
              padding: 0 7px;
              margin-left: 8px;
              font-size: 12px;
              font-weight: 400;
              line-height: 24px;
              color: #4285f4;
              cursor: pointer;
              border: 1px #4285f4 solid;
              border-radius: 4px;
            }
          }
        }

        .nav1_info {
          font-size: 16px;
          color: #333;
        }
      }

      .nav1_list:nth-of-type(1) {
        padding-left: 0;
        border-left: 0 solid #eeeeef;
      }
    }
  }

  .invoice1_info {
    min-width: 1184px;
    padding: 24px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 2px;
  }
}
</style>
